<!-- Login.vue -->
<template>
  <div class="login-container">
    <div class="login-form">
      <input type="text" v-model="username" placeholder="用户名" class="login-input" />
      <input type="password" v-model="password" placeholder="密码" class="login-input" />
      <button @click="login" class="login-button">登录</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      password: ''
    };
  },
  methods: {
    login() {
      if (this.username === 'admin' && this.password === '123456') {
        // 登录成功，跳转到其他页面
        this.$router.push('/home');
      } else {
        // 登录失败，提示用户输入错误
        alert('用户名或密码错误');
      }
    }
  }
};
</script>

<style scoped>
.login-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #f7f7f7;
  background-image: url('./1.jpg'); /* 假设图片放在项目中的相对路径 */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.login-form {
  background: white;
  padding: 20px;
  border-radius: 5px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.login-input {
  width: 100%;
  padding: 10px;
  margin-bottom: 10px;
  border: 1px solid #ccc;
  border-radius: 3px;
  box-sizing: border-box; /* 确保padding不会增加宽度 */
}

.login-button {
  width: 100%;
  padding: 10px;
  background-color: #42b983;
  color: white;
  border: none;
  border-radius: 3px;
  cursor: pointer;
}

.login-button:hover {
  background-color: #3aa373;
}
</style>